<template>
  <div class="page-wrapper">
    <div class="goods-main-info">
      <div class="goods-imgs">
        <el-carousel class="banners" :interval="5000" v-if="detailObj">
          <el-carousel-item v-for="(item,index) in detailObj.gallery" :key="index">
            <img :src="item" class="slide-image">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="goods-title">
        <div class="goods-price">
          <div class="price">
            <div class="main-price">
              {{skuObj.exchangePoints}}积分
            </div>
          </div>
          <div class="store">库存{{skuObj.productStock}}件</div>
        </div>
        <div class="goods-name">{{skuObj.productName}}</div>
      </div>
    </div>
    <!-- <div class="sku-info" @click="openSku" wx:if="{{detailObj.productItemPropList}}">
      <div class="sku-title">规格</div>
      <div class="select">{{skuName ? skuName : '请选择' }}<image class="icon-go" src="./../../static/img/icon-go.png" mode="aspectFit"></image></div>
    </div> -->
    <div class="detail-info" style="padding-bottom:2.66rem">
      <detailInfo  :detailInfo.sync="detailDes"></detailInfo>
      <!-- <detailInfo  :detailInfo="skuObj.buyInstructions"></detailInfo> -->
    </div>
    <div class="fix-footer">
      <div class="handle-btns" @click="subBuy">
          立即兑换
      </div>
    </div>
  </div>
</template>
<script>
import { API } from '../../config'
import detailInfo from './components/detailInfo'
export default {
  components:{
    detailInfo
  },
  data(){
    return {
      indicatorDots: true,
      tab: 0,
      // isCopyModal: false,
      detailObj: {},
      skuObj: {},
      num: 1,
      skuName: '',
      selArr: [],
      detailDes: {
        productDescription: '',
        buyInstructions: ''
      },
    }
  },
  methods:{
    // 切换tab
    toggleTab(e) {
      this.tab = parseInt(e.detail.value)
    },

    // 购买
    subBuy() {
      this.$router.push({
        path: `/order/orderNoun?productSkuId=${this.skuObj.productSkuId}&productNumber=${this.skuObj.productStock}`
      })
    },
    initFun() {
      let vm = this
      vm.getNounDetail()
    },
    /**
     * 获取商品详情
     *  */
    getNounDetail() {
      let vm = this
      let accesstoken = vm.getLocalStorage('accesstoken')
      vm.$axios.get(API + '/integralProduct/detail?productId='+ vm.$route.query.id,{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((response) => {
        let res = response.data
        if(res.data){
          vm.detailObj = res.data
          const { productStock, gallery, productSkuId, productId, exchangePoints } = vm.detailObj
          vm.skuObj = { productStock, gallery, productSkuId, productId, exchangePoints }
          vm.detailDes = {
            productDescription: vm.detailObj.productDescription,
            buyInstructions: vm.detailObj.buyInstructions
          }
        }
      })
    }
  },
  mounted() {
    this.initFun()
  }
}
</script>

<style lang='less' scoped>
  @import '../../css/goods/nounDetail.less';
</style>
